<%--
  Created by IntelliJ IDEA.
  User: Lamb
  Date: 2021/11/21
  Time: 8:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Admin</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>
    <style>
        .new{
            margin-top: 10rem;
        }
        .addBtn{
            margin-left: 2rem;
        }
    </style>
</head>
<body>
<div class="heder">
    <%@include file="adminHeader.jsp" %>
</div>
<div class="new">
    <h1>新闻公告管理<button type="button" class="btn btn-primary addBtn" onclick="add()">新增新闻公告</button> (实现新闻公告的增、删、查、改)</h1>
    <table id="table"></table>
</div>
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">编辑新闻公告</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="id">编号</label>
                    <input id="id" type="text" class="form-control" disabled/>
                </div>
                <div class="form-group">
                    <label for="title">标题</label>
                    <input id="title" type="text" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="content">内容</label>
                    <input id="content" type="text" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="type">类别</label>
                    <select id="type" class="form-control">
                        <option value="new">New</option>
                        <option value="notice">Notice</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="date">发布时间</label>
                    <input id="date" type="text" class="form-control" disabled/>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="editInfo()">修改</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="addModle" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">发布新闻公告</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="addTitle">标题</label>
                    <input id="addTitle" type="text" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="addContent">内容</label>
                    <input id="addContent" type="text" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="addType">类别</label>
                    <select id="addType" class="form-control">
                        <option value="new">New</option>
                        <option value="notice">Notice</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="addNew()">添加</button>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $('#table').bootstrapTable({
        url: "index",                         // URL
        method: "GET",                                        // 请求类型
        sidePagination: "server",                              // 设置在服务端还是客户端分页
        showRefresh: false,                                    // 是否刷新按钮
        sortStable: true,                                      // 是否支持排序
        cache: false,                                          // 是否使用缓存
        // pagination: true,                                      // 是否显示分页
        search: false,                                         // 是否有搜索框
        clickToSelect: true,                                   // 是否点击选中行
        pageNumber: 1,                                         // 首页页码，默认为1
        pageSize: 5,                                           // 页面数据条数
        pageList: [5, 10, 20, 30],
        queryParamsType: "",
        queryParams: function (params) {
            return {
                pageSize: params.pageSize,                     // 每页记录条数
                pageNumber: params.pageNumber,                 // 当前页索引
            };
        },
        columns: [{
            field: 'id',
            title: '编号',
            align: "center",
            halign: "center",
            valign: 'middle',
        },
            {
                field: 'title',
                title: '标题',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'content',
                title: '内容',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'type',
                title: '类别',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'date',
                title: '发布时间',
                align: "center",
                halign: "center",
                valign: 'middle'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                valign: 'middle',
                width: 200,
                events: {
                    'click #edit': function (e, value, row, index) {
                        $('#id').val(row.id);
                        $('#title').val(row.title);
                        $('#content').val(row.content);
                        $('#type').val(row.type);
                        $('#date').val(row.date);
                        $("#editModal").modal('show');
                    },
                    'click #delete': function (e, value, row, index) {
                        deleteInfo(row.id);
                    }
                },
                formatter: function (value, row, index) {
                    var result = "";
                    result += '<button id="edit" class="btn btn-info" data-toggle="modal" data-target="#editModal">编辑</button>';
                    result += '<button id="delete" class="btn btn-danger" style="margin-left:10px;">删除</button>';
                    return result;
                }
            }]
    })
    // 修改
    function editInfo() {
        $.ajax({
            type: 'post',
            url: 'admin',
            dataType: 'json',
            data: {
                method: 'update',
                id: $('#id').val(),
                title: $('#title').val(),
                content: $('#content').val(),
                type: $('#type').val(),
                date: $('#date').val()
            },
            success: function (data) {
                if (data) {
                    $('#table').bootstrapTable('refresh');
                    $('#editModal').modal('hide');
                } else {
                    alert('修改失败');
                }
            }
        })
    }
    // 删除
    function deleteInfo(id) {
        var res;
        res=confirm("确定永久删除该条新闻公告吗?"); //在页面上弹出对话框
        if(res==true){
            $.ajax({
                type: 'post',
                url: 'admin',
                dataType: 'json',
                data: {
                    method: 'delete',
                    id: id
                },
                success: function (data) {
                    if (data) {
                        $('#table').bootstrapTable('refresh');
                        alert("删除成功");
                    } else {
                        alert('删除失败');
                    }
                }
            })
        }
        else{

        }

    }
    //添加
    function add(){
        $("#addModle").modal("show");
    }

    function addNew(){
        if($('#addContent').val()===""||$('#addTitle').val()===""){
            alert("标题或者内容不可为空！");
            return;
        }
        $.ajax({
            type:"post",
            url:"admin",
            dataType: "json",
            data:{
                method: "add",
                title: $('#addTitle').val(),
                content: $('#addContent').val(),
                type: $('#addType').val(),
            },
            success: function (res){
                if(res){
                    $('#table').bootstrapTable('refresh');
                    $('#addModle').modal('hide');
                }else{
                    alert("添加失败!");
                }
                $('#addContent').val("");
                $('#addTitle').val("");
            }
        })
    }
</script>
</html>
